import { useState, useEffect, useMemo } from "react";
import { getUserInfo } from "@/apis/userApi";
import { UserInfo } from "@/apis/shared.ts";
import { Space, Avatar, Layout, Tabs, Button } from "antd";
import { UserOutlined } from "@ant-design/icons";
import UserArticleList from "./UserArticleList";
import UserDriftList from "./UserDriftList";
import UserCollectionList from "./UserCollectionList";
import { useNavigate } from "react-router-dom";
import UserCollectionListToChange from "./UserCollectionListToChange";
import { useSelector } from "react-redux";
import { RootState } from "@/store/index.ts";
import { removeQuotes, formatDate } from "@/utils/tool";
import type { TabsProps } from "antd";
import { createDraft } from "@/apis/draftApi";
import "./index.scss";

const { Sider, Content } = Layout;

const onChange = (key: string) => {
  console.log(key);
};

const contentStyle: React.CSSProperties = {
  textAlign: "center",
  minHeight: 120,
  backgroundColor: "#fff",
};

const siderStyle: React.CSSProperties = {
  textAlign: "center",
  backgroundColor: "#fff",
};

const layoutStyle = {
  borderRadius: 8,
  width: "100%",
};

function User() {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState<UserInfo>();
  const authorAvatar = useSelector(
    (state: RootState) => state.UserInfoStore.authorAvatar
  );

  const fetchUserInfo = async () => {
    /* 
      这里又获取了一次用户的信息，但是在登录的时候就已经获取过一次了，这里看能不能优化一下
    */
    const res = await getUserInfo();
    setUserInfo(res.data);
  };

  useEffect(() => {
    fetchUserInfo();
  }, []);

  const items: TabsProps["items"] = useMemo(
    () => [
      {
        key: "1",
        label: "文章列表",
        children: <UserArticleList isVertical={window.innerWidth < 768} />,
      },
      {
        key: "2",
        label: "草稿列表",
        children: <UserDriftList />,
      },
      {
        key: "3",
        label: "收藏夹列表",
        children: <UserCollectionListToChange />,
      },
    ],
    []
  );

  const handleAddDraft = async () => {
    console.log("add draft");
    const res = await createDraft();
    if (res.code === 200) {
      // 说明草稿创建完成了
      navigate(`/editor/?draftId=${res.data?.draftId}`);
    }
  };

  return (
    <div
      style={{
        maxWidth: "1000px",
        width: "95%",
        margin: "0 auto",
      }}
    >
      <Space direction="vertical" style={{ width: "100%" }}>
        <Space direction="horizontal">
          <Space>
            <Avatar
              src={removeQuotes(authorAvatar)}
              size={64}
              icon={<UserOutlined />}
            />
          </Space>
          <Space direction="vertical" style={{ textAlign: "left" }}>
            <div>昵称: {userInfo?.nickname}</div>
            <div>邮箱: {userInfo?.email}</div>
            <div>加入时间: {formatDate(userInfo?.create_time!)}</div>
            <div>简要描述: {userInfo?.description}</div>
          </Space>
          <Space>
            <Button onClick={handleAddDraft}>添加草稿</Button>
          </Space>
        </Space>
        <Layout style={layoutStyle}>
          <Sider width="25%" style={siderStyle} className="sider-responsive">
            <UserCollectionList />
          </Sider>
          <Layout>
            <Content style={contentStyle}>
              <Tabs
                defaultActiveKey="1"
                centered
                items={items}
                onChange={onChange}
              />
            </Content>
          </Layout>
        </Layout>
      </Space>
    </div>
  );
}

export default User;
